<template>
  <el-drawer
    v-model="visible"
    :title="drawerTitle"
    :direction="direction"
    :size="size"
    :show-close="showClose"
    :open-delay="openDelay"
    :close-delay="closeDelay"
    :beforeClose="handleBeforeClose"
    :close-on-click-modal="closeOnClickModal"
    append-to-body
    @open="open"
    @opened="opened"
    @close="closeDrawer"
    @closed="closed"
    @open-auto-focus="focus"
    @close-auto-focus="blur"
  >
    <page-filling v-if="visible" :targetPageId="targetPageId" @close-and-refresh="closeAndRefresh" @close-and-set="closeAndSet" @only-close="closeDrawer" />
    <template #footer v-if="showSubmit || showCancel">
      <el-button v-if="showCancel" type="default" @click="visible = false">{{ cancelText }}</el-button>
      <custom-button v-if="showSubmit" v-bind="submitBtnVbind" @custom-click="visible = false" />
    </template>
  </el-drawer>
</template>

<script>
import pageFilling from '../../views/page/filling/index.vue';

export default {
  name: 'AnvilDrawer',
  components: { pageFilling },
  provide() {
    return {
      // 接收从外部传来的数据
      getDataFromOthers: this.getDataFromOthers
    };
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    targetPageId: {
      type: String,
      default: ''
    },
    drawerTitle: {
      type: String,
      default: ''
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    // 是否展示提交按钮
    showSubmit: {
      type: Boolean,
      default: false
    },
    // 是否展示取消按钮
    showCancel: {
      type: Boolean,
      default: false
    },
    // 是否展示右上角关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 点击外部关闭
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    size: {
      type: [String, Number],
      default: '30%'
    },
    openDelay: {
      type: Number,
      default: 0
    },
    closeDelay: {
      type: Number,
      default: 0
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    beforeClose: {
      type: String,
      default: ''
    },
    // 提交按钮配置
    submitBtn: {
      type: Object,
      default: () => {}
    },
    open: {
      type: Function,
      default: () => {}
    },
    opened: {
      type: Function,
      default: () => {}
    },
    close: {
      type: Function,
      default: () => {}
    },
    closed: {
      type: Function,
      default: () => {}
    },
    blur: {
      type: Function,
      default: () => {}
    },
    focus: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      dataFromOthers: {}
    };
  },
  computed: {
    // 提交按钮的绑定属性
    submitBtnVbind() {
      return {
        ...(this.submitBtn || {}),
        pageId: this.$attrs.pageId
      };
    }
  },
  methods: {
    handleBeforeClose(done) {
      if (this.beforeClose) {
        const anvilCodeStore = this.useAnvilCodeStore();
        // 获取当前表单实例
        const { instance } = anvilCodeStore.getPageForm(this.$attrs.pageId);
        return instance[this.beforeClose](done);
      } else {
        done();
      }
    },
    openDrawer(data) {
      console.log('接收了', data);
      this.dataFromOthers = data;
      this.visible = true;
    },
    closeDrawer() {
      this.visible = false;
      if (this.close && typeof this.close == 'function') {
        this.close();
      }
    },
    closeAndRefresh() {
      this.closeDrawer();
      this.$nextTick(()=>{
        this.$emit('closeAndRefresh');
      })
    },
    closeAndSet(data) {
      this.closeDrawer();
      this.$nextTick(() => {
        this.$emit('closeAndSet', data);
      });
    },
    getDataFromOthers() {
      return this.dataFromOthers;
    }
  }
};
</script>

<style></style>
